<template>
  <div class="home">
      <h1>热销爆款</h1>
      <div class="head">
        <div @click="one()">空调</div>
        <div @click="two()">平板电视</div>
        <div @click="three()">洗衣机</div>
      </div>
      <ul class="list">
         <li v-for="item in arr4" :key = "item.id">
          <img :src="item.img" alt=""><br>
          <span>{{ item.jieshao }}</span>
          <p>{{ item.jiage }}</p>
          <button @click="tian(item.id)">加入购物车</button>
         </li>
      </ul>
      <h2>购物车</h2>
      <table border="1px">
         <thead>
          <tr>
            <th><input type="checkbox" @click="quan()">全选</th>  
            <th>商品</th>  
            <th>单价</th>  
            <th>数量</th>  
            <th>小计</th>  
            <th>操作</th>  
          </tr>
         </thead>
         <tbody>
            <tr v-for="item in che" :key="item.jieshao">
              <td><input type="checkbox" :checked="xuan"></td>
              <td><img :src="item.img" alt=""></td>
              <td>￥{{ item.jiage }}</td>
              <td><button  @click="jian()">-</button><input type="text" v-model="nei" class="shu"><button  @click="jia()">+</button></td>
              <td>￥{{ xiaozong(item.id) }}</td>
              <td><button @click="shan(item.id)">删除</button></td>
            </tr>
         </tbody>
      </table>
      <p>{{ zong }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  // name: 'HomeView',
  components: {
   
  },
  data(){
     return{
        arr:[
          {
            id:1,
            img:'https://paimgcdn.baidu.com/24BCE86C7EAF1B01?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F16173383402.png&rz=urar_2_968_600&v=0',
            jieshao:'海尔 2匹3匹',
            jiage:3899,
             shuliang:1
        },
        {
            id:2,
            img:'https://paimgcdn.baidu.com/ADF29C1EBF45A489?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F9855694026.jpg&rz=urar_2_968_600&v=0',
            jieshao:'海尔 KFR-72LW',
            jiage:6099,
             shuliang:1
        },
        {
            id:3,
            img:'https://paimgcdn.baidu.com/2A2E8A0C9513341C?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F16759572162.png&rz=urar_2_968_600&v=0',
            jieshao:'海尔 KFR-35GW',
            jiage:3699,
             shuliang:1
        }
        ],
        arr2:[
          {
            id:1,
            img:'https://img1.360buyimg.com/n6/jfs/t1/302656/28/10730/139590/6839133bF4464fbe5/16ba197fe02539a3.jpg',
            jieshao:'小米电视 55英寸一级能效',
            jiage:1599,
             shuliang:1
        },
        {
            id:2,
            img:'https://img1.360buyimg.com/n6/jfs/t1/299435/17/11254/176105/68382db8F94496336/203497f4188c3d67.jpg',
            jieshao:'创维电视65A3F',
            jiage:1999,
             shuliang:1
        },
        {
            id:3,
            img:'https://img1.360buyimg.com/n6/jfs/t1/304851/12/6082/122923/6837db9bFa0ec6bc8/7d3d1a6be9beb1ea.jpg',
            jieshao:'D&Q65英寸4K显示器',
            jiage:2599,
             shuliang:1
        },
        ],
        arr3:[
          {
            id:1,
            img:'https://paimgcdn.baidu.com/82BE4FB21FE8CE0E?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F17710164518.jpg&rz=urar_2_968_600&v=0',
            jieshao:'小鸭牌 透明黑',
            jiage:448,
             shuliang:1
        },
        {
            id:2,
            img:'https://paimgcdn.baidu.com/D6354C9513CA06D9?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F17839366950.jpg&rz=urar_2_968_600&v=0',
            jieshao:'小鸭牌 商用洗脱108升',
            jiage:2880,
             shuliang:1
        },
        {
            id:3,
            img:'https://paimgcdn.baidu.com/7F21942C2509E8BA?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F13499885737.jpg&rz=urar_2_968_600&v=0',
            jieshao:'邦乐尼工业洗衣机',
            jiage:16101.84,
             shuliang:1

        },
        ],
        arr4:[
          {
            id:1,
            img:'https://paimgcdn.baidu.com/24BCE86C7EAF1B01?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F16173383402.png&rz=urar_2_968_600&v=0',
            jieshao:'海尔 2匹3匹',
            jiage:3899,
            shuliang:1

        },
        {
            id:2,
            img:'https://paimgcdn.baidu.com/ADF29C1EBF45A489?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F9855694026.jpg&rz=urar_2_968_600&v=0',
            jieshao:'海尔 KFR-72LW',
            jiage:6099,
            shuliang:1
        },
        {
            id:3,
            img:'https://paimgcdn.baidu.com/2A2E8A0C9513341C?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F16759572162.png&rz=urar_2_968_600&v=0',
            jieshao:'海尔 KFR-35GW',
            jiage:3699,
            shuliang:1
        }
        ],
        che:[],
        a:'',
        nei:1,
        b:'',
        shanzhi:'',
        xuan:false
     }
  },
  methods:{
    one(){
      this.arr4 = this.arr
    },
    two(){
      this.arr4 = this.arr2
    },
    three(){
      this.arr4 = this.arr3   
    },
    tian(i){
      this.a = this.arr4.find(item => item.id = i)
      this.che.push(  
         this.a  
       )
       console.log(this.che)
    },
    jia(){
       this.nei++
    },
    jian(){                                             
       if(this.nei>1){
        this.nei--
       }
    },
    xiaozong(id){
       this.b = this.che.find(item => item.id = id)
       this.b.shuliang = this.nei
       return this.b.shuliang * this.b.jiage
      // console.log(this.b.shuliang)
    },
    shan(f){
      this.shanzhi = this.che.findIndex(item => item.id = f)
      this.che.splice(this.shanzhi,1)
    },
    quan(){
      if(this.xuan == false){
         this.xuan = true
      }else{
        this.xuan = false
      }
    }
  },
  computed:{
    zong(){
       var num = 0
       this.che.forEach(item =>{
          num +=item.shuliang * item.jiage
       })
       return num
    }
  }
}
</script>
<style> 
  * {
      padding: 0;
      margin: auto;
    }
    h1{
      text-align: center;
    }
    .head{
      width: 240px;
      height: 50px;
      display: flex;
      flex-direction: row;
    }
    .head div{
      width: 80px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
    img{
      width: 150px;
      height: 150px;
    }
    .list{
      width: 600px;
      height: 200px;
      display: flex;
      flex-direction: row;
    }
    h2{
      text-align: center;
      position: relative;
      top: 50px;
    }
    table{
      position: relative;
      top: 50px;
    }
    .shu{
      width: 20px;
    }
</style>